import React, { FC, useRef, useState } from 'react'
import {inject,observer} from 'mobx-react'
import Mytitle from '../../../../components/Mytitle'
import { UploadOutlined} from '@ant-design/icons';
import { baseURL } from '../../../../api/request';
import {ajax} from '../../../../api/index'
import {
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Image,
  Button,
  AutoComplete,
  message,
} from 'antd';
import { useNavigate } from 'react-router-dom';
import {annoTypeList} from "./../../../../utils/index"
import './index.scss'

const {Option} = Select 
const { TextArea } = Input;
 const AddAnno:FC<any>=({
  uinfo
 })=> {
  const navigate = useNavigate()
   const {userInfo}=uinfo
   const [form] = Form.useForm()
   const file:any = useRef()
   const [path,setPath] = useState<any>('')
   
   const onFinish=async(values: any)=>{
      console.log(values);
      values.info = uinfo.userInfo;
      let res=await ajax.addanno(values)
      if(res.code==200){

        //新增成功，跳到/home/mine/anno/list
        navigate('/home/mine/anno/list')
        
      }
      
   }
   const onFinishFailed=()=>{
     message.error("请输入公告信息")
   }

   //重置表单，包括图片
   const resetFields=()=>{
     form.resetFields()
     setPath(null)
   }

   //上传图片
   const todoUpload = ()=>{
    file.current.click()
 }

 const uploadFile=async()=>{
  const filedata = file.current.files[0]
  const data = new FormData()
  data.append("file",filedata)

  let res = await ajax.uploadfile(data)
  if(res.code==200){
     setPath(res.path)
     form.setFieldsValue({'desc':res.path})
  }
 }
  return (
    <div style={{position:"relative"}}>
        <Mytitle text='公告新增'></Mytitle>
        <div className='addfrom' style={{height:"100%",width:400,position:"absolute",left:0,right:0,margin:"auto"}}>
        <Form
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          form={form}
          layout={"vertical"}
          >
         <Form.Item
          name="title"
          label="公告标题"
          rules={[{ required: true, message: '请输入公告标题' }]}
            >
                <Input  placeholder="公告标题" />

            </Form.Item>

            <Form.Item
                name="type"
                label="公告类型"
                rules={[{ required: true, message: '请选择' }]}
            >
                <Select  style={{ width: '100%' }} >
                  {
                    annoTypeList.map((item: any,index: any)=>(
                      <Option
                       key={index} 
                       value={item.value}
                       >
                         {item.label} 
                       </Option>
                    ))
                  }
                </Select>
            </Form.Item>

            <Form.Item
                name="content"
                label="公告内容"
                rules={[{ required: true, message: '请输入公告内容' }]}
            >
                <TextArea  placeholder="公告内容" />
            </Form.Item>


            <Form.Item
                name="desc"
                label="公告描述"
                
            >
                {
                  path && <Image src={path.replace(/public/,baseURL)} style={{width:200,height:120,marginTop:20}} preview={false}/>
                }
                <input type="file"  ref={file} onChange={uploadFile}  style={{display:'none'}} />

                <Button style={{display:'block',marginTop:15}} onClick={todoUpload} icon={<UploadOutlined />}>上传公告图片描述</Button>
            </Form.Item>
            
            <Form.Item
            >
               <Row>
                 <Col span={11}>
                    <Button type="primary" style={{width:'100%'}}  htmlType="submit" >添加公告</Button>
                 </Col>
                 <Col span={11} offset={2} >
                    <Button danger style={{width:'100%'}} onClick={resetFields} >重置</Button>
                 </Col>
               </Row>
            </Form.Item>



        </Form>

        </div>
    </div>
  )
}
export default inject('uinfo')(observer(AddAnno) )
